<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>仿英雄联盟</title>
    <style>
        *{margin: 0;padding: 0;}
        .out{
            position:absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 435px;
            width: 580px;
        }
        .big{
            height: 120px;
            width: 120px;
        }
        ul{
            list-style:none;
        }
        li{
            float: left;
            height: 120px;
            width: 120px;
            overflow: hidden;
            margin: 0 25px 25px 0;
        }
        .in{
            padding: 5px;
            height: 45px;
            width: 110px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 15px;
        }
        .small{
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
        li:hover .big{
            transform: scale(1.5,1.5);
            transition: 0.7s;
        }
        li:hover .in{
            transform: translateY(-60px);
            transition: 0.7s;
        }

    </style>
</head>
<body>
    <div class="out">
        <ul >
            <li>
                <img class="big" src="suho.png">
                <div class="in">
                    EXO<br><img class="small" src="ssuho.png">suho&nbsp;队长
                </div>
            </li>
            <li>
                <img class="big" src="xiumin.png">
                <div class="in">
                    EXO<br><img class="small" src="sxiumin.png">xiumin&nbsp;主唱
                </div>
            </li>
            <li>
                <img class="big" src="luhan.png">
                <div class="in">
                    EXO<br><img class="small" src="sluhan.png">luhan&nbsp;主唱
                </div>
            </li>
            <li>
                <img class="big" src="chen.png">
                <div class="in">
                    EXO<br><img class="small" src="schen.png">chen&nbsp;主唱
                </div>
            </li>
            <li>
                <img class="big" src="lay.png">
                <div class="in">
                    EXO<br><img class="small" src="slay.png">lay&nbsp;主舞
                </div>
            </li>
            <li>
                <img class="big" src="kris.png">
                <div class="in">
                    EXO<br><img class="small" src="skris.png">kris&nbsp;rapper
                </div>
            </li>
            <li>
                <img class="big" src="baekhyun.png">
                <div class="in">
                    EXO<br><img class="small" src="sbaekhyun.png">伯贤&nbsp;主唱
                </div>
            </li>
            <li>
                <img class="big" src="chanyeol.png">
                <div class="in">
                    EXO<br><img class="small" src="schanyeol.png">灿烈&nbsp;rapper
                </div>
            </li>
            <li>
                <img class="big" src="sehun.png">
                <div class="in">
                    EXO<br><img class="small" src="ssehun.png">世勋&nbsp;rapper
                </div>
            </li>
            <li>
                <img class="big" src="kai.png">
                <div class="in">
                    EXO<br><img class="small" src="skai.png">kai&nbsp;主舞
                </div>
            </li>
            <li>
                <img class="big" src="tao.png">
                <div class="in">
                    EXO<br><img class="small" src="stao.png">tao&nbsp;rapper
                </div>
            </li>
            <li>
                <img class="big" src="do.png">
                <div class="in">
                    EXO<br><img class="small" src="sdo.png">d.o.&nbsp;主唱
                </div>
            </li>
        </ul>
    </div>
</body>
</html>